<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Element Timing API</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/element-timing" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Element Timing API</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/element-timing">https://wicg.github.io/element-timing</a>
     <dt>Test Suite:
     <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/element-timing">https://github.com/web-platform-tests/wpt/tree/master/element-timing</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:npm@chromium.org">Nicolás Peña Moreno</a> (<a class="p-org org" href="https://google.com">Google</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:tdresser@chromium.org">Tim Dresser</a> (<a class="p-org org" href="https://google.com">Google</a>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Element Timing API Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document defines an API that enables monitoring when large or developer-specified image elements and text nodes are displayed on screen.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#sec-intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#sec-elements-exposed"><span class="secno">1.1</span> <span class="content">Elements exposed</span></a>
      <li><a href="#sec-example"><span class="secno">1.2</span> <span class="content">Usage example</span></a>
     </ol>
    <li>
     <a href="#sec-element-timing"><span class="secno">2</span> <span class="content">Element Timing</span></a>
     <ol class="toc">
      <li><a href="#sec-performance-element-timing"><span class="secno">2.1</span> <span class="content"><code class="idl"><span>PerformanceElementTiming</span></code> interface</span></a>
     </ol>
    <li>
     <a href="#sec-processing-model"><span class="secno">3</span> <span class="content">Processing model</span></a>
     <ol class="toc">
      <li><a href="#sec-modifications-DOM"><span class="secno">3.1</span> <span class="content">Modifications to the DOM specification</span></a>
      <li><a href="#sec-modifications-CSS"><span class="secno">3.2</span> <span class="content">Modifications to the CSS specification</span></a>
      <li><a href="#sec-modifications-HTML"><span class="secno">3.3</span> <span class="content">Modifications to the HTML specification</span></a>
      <li><a href="#sec-process-loaded-image"><span class="secno">3.4</span> <span class="content">Process image that finished loading</span></a>
      <li><a href="#sec-report-image-element"><span class="secno">3.5</span> <span class="content">Report image Element Timing</span></a>
      <li><a href="#sec-report-text"><span class="secno">3.6</span> <span class="content">Report text Element Timing</span></a>
      <li><a href="#sec-element-processing"><span class="secno">3.7</span> <span class="content">Element Timing processing</span></a>
      <li><a href="#sec-get-an-element"><span class="secno">3.8</span> <span class="content">Get an element algorithm</span></a>
     </ol>
    <li><a href="#sec-security"><span class="secno">4</span> <span class="content">Security &amp; privacy considerations</span></a>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="sec-intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#sec-intro"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>Knowing when critical elements are displayed on screen is key to understanding page load performance.
While fast rendering of the essential components is not sufficient for a satisfactory loading experience, it is necessary.
Therefore, monitoring these rendering timestamps is important to improve and prevent regressions in page loads.</p>
   <p>This specification gives developers and analytics providers an API to measure rendering timestamps of critical elements.
There is currently no good way to measure these timestamps for real users.
Existing approaches would require either registering observers too early or significant DOM manipulation.
These approaches are discussed on the <a href="#sec-security">§ 4 Security &amp; privacy considerations</a> section.</p>
   <p>Web developers are the experts in critical user interactions for their sites, so they should be allowed to tell the user agent which are the elements they care about.
Thus, this API exposes rendering timing information about web-developer-annotated elements.</p>
   <h3 class="heading settled" data-level="1.1" id="sec-elements-exposed"><span class="secno">1.1. </span><span class="content">Elements exposed</span><a class="self-link" href="#sec-elements-exposed"></a></h3>
   <p>The Element Timing API supports timing information about the following elements:</p>
   <ul>
    <li data-md>
     <p><code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element">img</a></code> elements.</p>
    <li data-md>
     <p><code class="highlight"><a data-link-type="element" href="https://svgwg.org/svg2-draft/embedded.html#elementdef-image" id="ref-for-elementdef-image">image</a></code> elements inside an <code class="highlight"><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-svg" id="ref-for-elementdef-svg">svg</a></code>.</p>
    <li data-md>
     <p>The poster images of <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/media.html#video" id="ref-for-video">video</a></code> elements.</p>
    <li data-md>
     <p>Elements with a <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3#propdef-background-image" id="ref-for-propdef-background-image">background-image</a>.</p>
    <li data-md>
     <p>Groups of text nodes, which are aggregated as described in <a href="#sec-modifications-CSS">§ 3.2 Modifications to the CSS specification</a>.</p>
   </ul>
   <p>Elements that have a "<code class="highlight">elementtiming</code>" content attribute are reported in the <a data-link-type="dfn" href="#report-image-element-timing" id="ref-for-report-image-element-timing">report image element timing</a> and the <a data-link-type="dfn" href="#report-text-element-timing" id="ref-for-report-text-element-timing">report text element timing</a> algorithms.</p>
   <h3 class="heading settled" data-level="1.2" id="sec-example"><span class="secno">1.2. </span><span class="content">Usage example</span><a class="self-link" href="#sec-example"></a></h3>
   <p>The following example shows an image that is registered for observation via its <code class="highlight">elementtiming</code> attribute, and an observer gathering the timing information.</p>
<pre class="example highlight" id="example-03e934c2"><a class="self-link" href="#example-03e934c2"></a><c- p>&lt;</c-><c- f>img...</c-> <c- e>elementtiming</c-><c- o>=</c-><c- s>'foobar'</c-><c- p>/></c->
<c- p>&lt;</c-><c- f>p</c-> <c- e>elementtiming</c-><c- o>=</c-><c- s>'important-paragraph'</c-><c- p>></c->This is text I care about.<c- p>&lt;/</c-><c- f>p</c-><c- p>></c->
...
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
<c- kr>const</c-> observer <c- o>=</c-> <c- k>new</c-> PerformanceObserver<c- p>((</c->list<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
  <c- a>let</c-> perfEntries <c- o>=</c-> list<c- p>.</c->getEntries<c- p>();</c->
  <c- c1>// Process the entries by iterating over them.</c->
<c- p>});</c->
observer<c- p>.</c->observe<c- p>({</c->type<c- o>:</c-> <c- t>'element'</c-><c- p>,</c-> buffered<c- o>:</c-> <c- kc>true</c-><c- p>});</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
   <p>The following are sample elements whose rendering timestamps could be measured by using this API and which should be compared to page navigation:</p>
   <ul>
    <li data-md>
     <p>The images in the image carousel of a shopping site.</p>
    <li data-md>
     <p>The main photo in a story of a news site.</p>
    <li data-md>
     <p>The title of a blog post.</p>
    <li data-md>
     <p>The first paragraph in an entry of an encyclopedia site.</p>
   </ul>
   <p>The API could have use cases outside of page load by comparing the rendering timestamps with input timestamps.
For example, developers could monitor the time it takes for a widget to show up after a click that triggers it.</p>
   <h2 class="heading settled" data-level="2" id="sec-element-timing"><span class="secno">2. </span><span class="content">Element Timing</span><a class="self-link" href="#sec-element-timing"></a></h2>
   <p>Element Timing involves the following new interfaces:</p>
   <h3 class="heading settled" data-level="2.1" id="sec-performance-element-timing"><span class="secno">2.1. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#performanceelementtiming" id="ref-for-performanceelementtiming">PerformanceElementTiming</a></code> interface</span><a class="self-link" href="#sec-performance-element-timing"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="performanceelementtiming"><code class="highlight"><c- g>PerformanceElementTiming</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="attribute" data-export data-readonly data-type="DOMHighResTimeStamp" id="dom-performanceelementtiming-rendertime"><code class="highlight"><c- g>renderTime</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp①"><c- n>DOMHighResTimeStamp</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="attribute" data-export data-readonly data-type="DOMHighResTimeStamp" id="dom-performanceelementtiming-loadtime"><code class="highlight"><c- g>loadTime</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly"><c- n>DOMRectReadOnly</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="attribute" data-export data-readonly data-type="DOMRectReadOnly" id="dom-performanceelementtiming-intersectionrect"><code class="highlight"><c- g>intersectionRect</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-performanceelementtiming-identifier"><code class="highlight"><c- g>identifier</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-performanceelementtiming-naturalwidth"><code class="highlight"><c- g>naturalWidth</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-performanceelementtiming-naturalheight"><code class="highlight"><c- g>naturalHeight</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-performanceelementtiming-id"><code class="highlight"><c- g>id</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="attribute" data-export data-readonly data-type="Element?" id="dom-performanceelementtiming-element"><code class="highlight"><c- g>element</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-performanceelementtiming-url"><code class="highlight"><c- g>url</c-></code></dfn>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="PerformanceElementTiming" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-performanceelementtiming-tojson"><code class="highlight"><c- g>toJSON</c-></code><a class="self-link" href="#dom-performanceelementtiming-tojson"></a></dfn>();
};
</pre>
   <p>A <code class="idl"><a data-link-type="idl" href="#performanceelementtiming" id="ref-for-performanceelementtiming①">PerformanceElementTiming</a></code> object reports timing information about one associated element.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="#performanceelementtiming" id="ref-for-performanceelementtiming②">PerformanceElementTiming</a></code> object has these associated concepts, all of which are initially set to <code class="highlight"><c- kc>null</c-></code>:</p>
   <ul>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="request">request</dfn> containing the image request (if the entry is for image content).</p>
    <li data-md>
     <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="element">element</dfn> containing the associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①">Element</a></code>.</p>
   </ul>
   <p>The associated concepts and some attributes for <code class="idl"><a data-link-type="idl" href="#performanceelementtiming" id="ref-for-performanceelementtiming③">PerformanceElementTiming</a></code> are specified in the processing model in <a href="#sec-report-image-element">§ 3.5 Report image Element Timing</a> and <a href="#sec-report-text">§ 3.6 Report text Element Timing</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype">entryType</a></code> attribute’s getter must return the <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③">DOMString</a></code> <code class="highlight"><c- u>"element"</c-></code>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name">name</a></code> attribute’s getter must return the value it was initialized to.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime">startTime</a></code> attribute’s getter must return the value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object">context object</a>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-rendertime" id="ref-for-dom-performanceelementtiming-rendertime">renderTime</a></code> if it is not 0, and the value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object①">context object</a>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-loadtime" id="ref-for-dom-performanceelementtiming-loadtime">loadTime</a></code> otherwise.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration">duration</a></code> attribute’s getter must return 0.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-rendertime" id="ref-for-dom-performanceelementtiming-rendertime①">renderTime</a></code> attribute must return the value it was initialized to.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-loadtime" id="ref-for-dom-performanceelementtiming-loadtime①">loadTime</a></code> attribute’s getter must return the the value it was initialized to.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-intersectionrect" id="ref-for-dom-performanceelementtiming-intersectionrect">intersectionRect</a></code> attribute must return the value it was initialized to.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-identifier" id="ref-for-dom-performanceelementtiming-identifier">identifier</a></code> attribute’s getter must return the value it was initialized to.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-naturalwidth" id="ref-for-dom-performanceelementtiming-naturalwidth">naturalWidth</a></code> attribute must return the value it was initialized to.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-naturalheight" id="ref-for-dom-performanceelementtiming-naturalheight">naturalHeight</a></code> attribute must return the value it was initialized to.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-id" id="ref-for-dom-performanceelementtiming-id">id</a></code> attribute’s getter must return the value it was initialized to.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-element" id="ref-for-dom-performanceelementtiming-element">element</a></code> attribute’s getter must run the <a data-link-type="dfn" href="#get-an-element" id="ref-for-get-an-element">get an element</a> algorithm with <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object②">context object</a>’s <a data-link-type="dfn" href="#element" id="ref-for-element②">element</a> and null as inputs.</p>
   <p class="note" role="note"><span>Note:</span> This means that an element that is no longer <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant">descendant</a> of the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> will no longer be returned by <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-element" id="ref-for-dom-performanceelementtiming-element①">element</a></code>'s attribute getter.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-url" id="ref-for-dom-performanceelementtiming-url">url</a></code> attribute’s getter must perform the following steps:</p>
   <div class="algorithm" data-algorithm="PerformanceElementTiming url">
    <ol>
     <li data-md>
      <p>Let <var>url</var> be <a data-link-type="dfn" href="#request" id="ref-for-request">request</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#resolve-a-url" id="ref-for-resolve-a-url">resolved URL</a></p>
     <li data-md>
      <p>If <var>url</var>’s <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-scheme" id="ref-for-concept-url-scheme">scheme</a> is "data:", trim <var>url</var> to its first 100 characters.</p>
     <li data-md>
      <p>Return <var>url</var>.</p>
    </ol>
   </div>
   <p class="note" role="note"><span>Note:</span> The URL is trimmed for data URLs to avoid excessive memory in the entry.</p>
   <h2 class="heading settled" data-level="3" id="sec-processing-model"><span class="secno">3. </span><span class="content">Processing model</span><a class="self-link" href="#sec-processing-model"></a></h2>
   <p class="note" role="note"><span>Note:</span> A user agent implementing the Element Timing API would need to include <code class="highlight"><c- u>"element"</c-></code> in <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute" id="ref-for-supportedentrytypes-attribute">supportedEntryTypes</a></code> for <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> contexts.
This allows developers to detect support for element timing.</p>
   <h3 class="heading settled" data-level="3.1" id="sec-modifications-DOM"><span class="secno">3.1. </span><span class="content">Modifications to the DOM specification</span><a class="self-link" href="#sec-modifications-DOM"></a></h3>
   <p><em>This section will be removed once the <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> specification has been modified.</em></p>
   <p>We extend the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③">Element</a></code> interface as follows:</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#element" id="ref-for-element④"><c- g>Element</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export data-type="DOMString" id="dom-element-elementtiming"><code class="highlight"><c- g>elementTiming</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-element-elementtiming" id="ref-for-dom-element-elementtiming">elementTiming</a></code> attribute must <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-reflect" id="ref-for-concept-reflect">reflect</a> the element’s "<code class="highlight">elementtiming</code>" content attribute.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑤">Element</a></code> has an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associated-image-request">associated image request</dfn> which is initially null.
When the processing model for an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥">Element</a></code> <em>element</em> of type <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement" id="ref-for-htmlimageelement">HTMLImageElement</a></code>, <code class="idl"><a data-link-type="idl" href="https://svgwg.org/svg2-draft/embedded.html#InterfaceSVGImageElement" id="ref-for-InterfaceSVGImageElement">SVGImageElement</a></code>, or <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement">HTMLVideoElement</a></code> creates a new image resource (e.g., to be displayed as an image or poster image), <em>element</em>’s <a data-link-type="dfn" href="#associated-image-request" id="ref-for-associated-image-request">associated image request</a> is set to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage#image-request" id="ref-for-image-request">image request</a> of the created image resource.</p>
   <p class="note" role="note"><span>Note:</span> Every image resource that is obtained from a URL whose <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-scheme" id="ref-for-concept-url-scheme①">scheme</a> is equal to "data" has an associated <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage#image-request" id="ref-for-image-request①">image request</a> which is not fetched but still needs to be loaded.
This request can be the <a data-link-type="dfn" href="#associated-image-request" id="ref-for-associated-image-request①">associated image request</a> of an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑦">Element</a></code>.</p>
   <p class="note" role="note"><span>Note:</span> The current language is vague since it does not point to specific algorithms.
This can be made more rigorous when the corresponding processing models have a more unified processing model.
For instance, the only <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement" id="ref-for-htmlimageelement①">HTMLImageElement</a></code> uses the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipageimages.html#list-of-available-images" id="ref-for-list-of-available-images">list of available images</a>.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑧">Element</a></code> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-of-owned-text-nodes">set of owned text nodes</dfn>, which is initially an empty <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set">ordered set</a>.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> has <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="images-pending-rendering">images pending rendering</dfn>, a list of triples (<code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑨">Element</a></code>, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage#image-request" id="ref-for-image-request②">image request</a>, DOMHighResTimeStamp) which are considered loaded but not yet rendered.
When an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⓪">Element</a></code> <em>element</em>’s <a data-link-type="dfn" href="#associated-image-request" id="ref-for-associated-image-request②">associated image request</a> has become <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/images.html#img-all" id="ref-for-img-all">completely available</a>, run the algorithm to <a data-link-type="dfn" href="#process-an-image-that-finished-loading" id="ref-for-process-an-image-that-finished-loading">process an image that finished loading</a> passing in <em>element</em> and its <a data-link-type="dfn" href="#associated-image-request" id="ref-for-associated-image-request③">associated image request</a> as inputs.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code> also has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-of-elements-with-rendered-text">set of elements with rendered text</dfn>, which is initially an empty, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set①">ordered set</a>.</p>
   <h3 class="heading settled" data-level="3.2" id="sec-modifications-CSS"><span class="secno">3.2. </span><span class="content">Modifications to the CSS specification</span><a class="self-link" href="#sec-modifications-CSS"></a></h3>
   <p>When the user agent is executing the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/zindex.html#painting-order" id="ref-for-painting-order">painting order</a>, it must populate the <a data-link-type="dfn" href="#set-of-owned-text-nodes" id="ref-for-set-of-owned-text-nodes">set of owned text nodes</a> of the painted <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①①">Elements</a></code> so that the following is true:</p>
   <div class="algorithm" data-algorithm="text aggregation">
    <ul>
     <li data-md>
      <p>If a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#text" id="ref-for-text">Text</a></code> object <var>text</var> will not be painted due to the font face being in its <a data-link-type="dfn" href="https://drafts.csswg.org/css-fonts-4/#font-block-period" id="ref-for-font-block-period">font block period</a>, then it is not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#set-append" id="ref-for-set-append">appended</a> to the <a data-link-type="dfn" href="#set-of-owned-text-nodes" id="ref-for-set-of-owned-text-nodes①">set of owned text nodes</a> of any <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①②">Element</a></code>.</p>
     <li data-md>
      <p>Otherwise, <var>text</var> is <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#set-append" id="ref-for-set-append①">appended</a> to the <a data-link-type="dfn" href="#set-of-owned-text-nodes" id="ref-for-set-of-owned-text-nodes②">set of owned text nodes</a> of the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①③">Element</a></code> which determines the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> of <var>text</var>.</p>
    </ul>
   </div>
   <p class="note" role="note"><span>NOTE:</span> A user agent might want to use a stack to efficiently compute the <a data-link-type="dfn" href="#set-of-owned-text-nodes" id="ref-for-set-of-owned-text-nodes③">set of owned text nodes</a> while implementing the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/zindex.html#painting-order" id="ref-for-painting-order①">painting order</a>.</p>
   <p>Every <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①④">Element</a></code> has a list of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associated-background-image-requests">associated background image requests</dfn> which is initially an empty array.
When the processing model for the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑤">Element</a></code> <em>element</em>’s style requires a new image resource (to be displayed as background image), the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage#image-request" id="ref-for-image-request③">image request</a> created by the new resource is appended to <em>element</em>’s <a data-link-type="dfn" href="#associated-background-image-requests" id="ref-for-associated-background-image-requests">associated background image requests</a>.
Whenever an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage#image-request" id="ref-for-image-request④">image request</a> in an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑥">Element</a></code> <em>element</em>’s <a data-link-type="dfn" href="#associated-background-image-requests" id="ref-for-associated-background-image-requests①">associated background image requests</a> becomes <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/images.html#img-all" id="ref-for-img-all①">completely available</a>, run the algorithm to <a data-link-type="dfn" href="#process-an-image-that-finished-loading" id="ref-for-process-an-image-that-finished-loading①">process an image that finished loading</a> with <em>element</em> and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage#image-request" id="ref-for-image-request⑤">image request</a> as inputs.</p>
   <p class="note" role="note"><span>NOTE:</span> we assume that there is one <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage#image-request" id="ref-for-image-request⑥">image request</a> for each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑦">Element</a></code> that a <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3#propdef-background-image" id="ref-for-propdef-background-image①">background-image</a> property affects and for each URL that the <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3#propdef-background-image" id="ref-for-propdef-background-image②">background-image</a> property specifies.
So, for example, if there is a style with two URLs affecting all <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element" id="ref-for-the-div-element">div</a></code>s, and there are two <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element" id="ref-for-the-div-element①">div</a></code>s, then there will be four <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage#image-request" id="ref-for-image-request⑦">image requests</a>.
This means that a single <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3#propdef-background-image" id="ref-for-propdef-background-image③">background-image</a> property could produce multiple <code class="idl"><a data-link-type="idl" href="#performanceelementtiming" id="ref-for-performanceelementtiming④">PerformanceElementTiming</a></code> entries because it can affect multiple elements and because it can specify multiple URLs.</p>
   <h3 class="heading settled" data-level="3.3" id="sec-modifications-HTML"><span class="secno">3.3. </span><span class="content">Modifications to the HTML specification</span><a class="self-link" href="#sec-modifications-HTML"></a></h3>
   <p><em>This section will be removed once the <a data-link-type="biblio" href="#biblio-html">[HTML]</a> specification has been modified.</em></p>
   <p>In the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="ref-for-update-the-rendering">update the rendering</a> step of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model" id="ref-for-event-loop-processing-model">event loop processing model</a>, add the following substep at the end:</p>
   <ol>
    <li data-md>
     <p>For each <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active" id="ref-for-fully-active">fully active</a> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code> in <em>docs</em>, run the <a data-link-type="dfn" href="#element-timing-processing" id="ref-for-element-timing-processing">element timing processing</a> algorithm passing in the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code> and <em>now</em>.</p>
   </ol>
   <h3 class="heading settled" data-level="3.4" id="sec-process-loaded-image"><span class="secno">3.4. </span><span class="content">Process image that finished loading</span><a class="self-link" href="#sec-process-loaded-image"></a></h3>
   <div class="algorithm" data-algorithm="image element loaded">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="process-an-image-that-finished-loading">process an image that finished loading</dfn> given <var>element</var> and <var>imageRequest</var> as inputs: 
    <ol>
     <li data-md>
      <p>Let <var>element</var> be the input <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑧">Element</a></code>.</p>
     <li data-md>
      <p>Let <var>imageRequest</var> be <var>element</var>’s <a data-link-type="dfn" href="#associated-image-request" id="ref-for-associated-image-request④">associated image request</a>.</p>
     <li data-md>
      <p>Let <var>root</var> be <var>element</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root">root</a>.</p>
     <li data-md>
      <p>If <var>root</var> is not a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑤">Document</a></code>, return.</p>
     <li data-md>
      <p>Let <var>now</var> be the <a data-link-type="dfn" href="https://w3c.github.io/hr-time#dfn-current-high-resolution-time" id="ref-for-dfn-current-high-resolution-time">current high resolution time</a>.</p>
     <li data-md>
      <p>If <var>imageRequest</var> is not a data URL <a data-link-type="biblio" href="#biblio-rfc2397">[RFC2397]</a> and if the <a data-link-type="dfn" href="https://w3c.github.io/resource-timing#dfn-timing-allow-check" id="ref-for-dfn-timing-allow-check">timing allow check</a> fails for <var>imageRequest</var>’s resource, run the <a data-link-type="dfn" href="#report-image-element-timing" id="ref-for-report-image-element-timing①">report image element timing</a> algorithm, passing in the triple (<var>element</var>, <var>imageRequest</var>, <var>now</var>), 0, and <var>root</var> as inputs.</p>
     <li data-md>
      <p>Otherwise, add the triple (<var>element</var>, <var>imageRequest</var>, <var>now</var>) to <var>root</var>’s <a data-link-type="dfn" href="#images-pending-rendering" id="ref-for-images-pending-rendering">images pending rendering</a>.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.5" id="sec-report-image-element"><span class="secno">3.5. </span><span class="content">Report image Element Timing</span><a class="self-link" href="#sec-report-image-element"></a></h3>
   <div class="algorithm" data-algorithm="report image element timing">
     When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="report-image-element-timing">report image element timing</dfn> given a triple (<var>element</var>, <var>imageRequest</var>, <var>loadTime</var>), a DOMHighResTimestamp <var>renderTime</var> and a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑥">Document</a></code> <var>document</var>, perform the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>intersectionRect</var> be the value returned by the <a data-link-type="dfn" href="https://w3c.github.io/IntersectionObserver#calculate-intersection-rect-algo" id="ref-for-calculate-intersection-rect-algo">intersection rect algorithm</a> using <var>element</var> as the target and viewport as the root.</p>
     <li data-md>
      <p>Let <var>exposedElement</var> be the result of running <a data-link-type="dfn" href="#get-an-element" id="ref-for-get-an-element①">get an element</a> with <var>element</var> and <var>document</var> as input.</p>
     <li data-md>
      <p>If <var>exposedElement</var> is not null, call the <a data-link-type="dfn" href="https://wicg.github.io/largest-contentful-paint/#potentially-add-a-largestcontentfulpaint-entry" id="ref-for-potentially-add-a-largestcontentfulpaint-entry">potentially add a LargestContentfulPaint entry</a> algorithm with <var>intersectionRect</var>, <var>imageRequest</var>, <var>renderTime</var>, <var>loadTime</var>, <var>element</var>, and <var>document</var>.</p>
     <li data-md>
      <p>If <var>element</var>’s "<code class="highlight">elementtiming</code>" content attribute is absent, then abort these steps.</p>
     <li data-md>
      <p>Create and initialize a <code class="idl"><a data-link-type="idl" href="#performanceelementtiming" id="ref-for-performanceelementtiming⑤">PerformanceElementTiming</a></code> object <var>entry</var>.</p>
      <ol>
       <li data-md>
        <p>Initialize <var>entry</var>’s <a data-link-type="dfn" href="#request" id="ref-for-request①">request</a> to <var>imageRequest</var>.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <a data-link-type="dfn" href="#element" id="ref-for-element①⑨">element</a> to <var>element</var>.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name①">name</a></code> to the <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤">DOMString</a></code> "image-paint".</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-rendertime" id="ref-for-dom-performanceelementtiming-rendertime②">renderTime</a></code> to <var>renderTime</var>.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-loadtime" id="ref-for-dom-performanceelementtiming-loadtime②">loadTime</a></code> to <var>loadTime</var>.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-intersectionrect" id="ref-for-dom-performanceelementtiming-intersectionrect①">intersectionRect</a></code> to <var>intersectionRect</var>.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-identifier" id="ref-for-dom-performanceelementtiming-identifier①">identifier</a></code> to <var>element</var>’s "<code class="highlight">elementtiming</code>" content attribute.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-naturalwidth" id="ref-for-dom-performanceelementtiming-naturalwidth①">naturalWidth</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-naturalheight" id="ref-for-dom-performanceelementtiming-naturalheight①">naturalHeight</a></code> by running the same steps for an <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element①">img</a></code>'s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage#dom-img-naturalwidth" id="ref-for-dom-img-naturalwidth">naturalWidth</a></code> and <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage#dom-img-naturalheight" id="ref-for-dom-img-naturalheight">naturalHeight</a></code> attribute getters, but using <var>imageRequest</var> as the image.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-id" id="ref-for-dom-performanceelementtiming-id①">id</a></code> to <var>element</var>’s "<code class="highlight">id</code>" content attribute.</p>
      </ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry" id="ref-for-dfn-queue-a-performanceentry">Queue the PerformanceEntry</a> <var>entry</var>.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.6" id="sec-report-text"><span class="secno">3.6. </span><span class="content">Report text Element Timing</span><a class="self-link" href="#sec-report-text"></a></h3>
   <div class="algorithm" data-algorithm="report text element timing">
     When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="report-text-element-timing">report text element timing</dfn> given an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②⓪">Element</a></code> <var>element</var>, a DOMHighResTimestamp <var>renderTime</var> and a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑦">Document</a></code> <var>document</var>, perform the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>intersectionRect</var> be an empty rectangle.</p>
     <li data-md>
      <p>For each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#text" id="ref-for-text①">Text</a></code> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#boundary-point-node" id="ref-for-boundary-point-node">node</a> <var>text</var> in <var>element</var>’s <a data-link-type="dfn" href="#set-of-owned-text-nodes" id="ref-for-set-of-owned-text-nodes④">set of owned text nodes</a>:</p>
      <ol>
       <li data-md>
        <p>Augment <var>intersectionRect</var> to be smallest rectangle containing the border box of <var>text</var> and <var>intersectionRect</var>.</p>
      </ol>
     <li data-md>
      <p>Intersect <var>intersectionRect</var> with the visual viewport.</p>
     <li data-md>
      <p>Let <var>exposedElement</var> be the result of running <a data-link-type="dfn" href="#get-an-element" id="ref-for-get-an-element②">get an element</a> with <var>element</var> and <var>document</var> as input.</p>
     <li data-md>
      <p>If <var>exposedElement</var> is not null, call the <a data-link-type="dfn" href="https://wicg.github.io/largest-contentful-paint/#potentially-add-a-largestcontentfulpaint-entry" id="ref-for-potentially-add-a-largestcontentfulpaint-entry①">potentially add a LargestContentfulPaint entry</a> algorithm with <var>intersectionRect</var>, null, <var>renderTime</var>, 0, <var>exposedElement</var>, and <var>document</var>.</p>
     <li data-md>
      <p>If <var>element</var>’s "<code class="highlight">elementtiming</code>" content attribute is absent, then abort these steps.</p>
     <li data-md>
      <p>Create and initialize a <code class="idl"><a data-link-type="idl" href="#performanceelementtiming" id="ref-for-performanceelementtiming⑥">PerformanceElementTiming</a></code> object <var>entry</var>.</p>
      <ol>
       <li data-md>
        <p>Initialize <var>entry</var>’s <a data-link-type="dfn" href="#element" id="ref-for-element②①">element</a> to <var>element</var>.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name②">name</a></code> to the <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥">DOMString</a></code> "text-paint".</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-rendertime" id="ref-for-dom-performanceelementtiming-rendertime③">renderTime</a></code> to <var>renderTime</var>.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-loadtime" id="ref-for-dom-performanceelementtiming-loadtime③">loadTime</a></code> to 0.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-intersectionrect" id="ref-for-dom-performanceelementtiming-intersectionrect②">intersectionRect</a></code> to <var>intersectionRect</var>.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-identifier" id="ref-for-dom-performanceelementtiming-identifier②">identifier</a></code> to <var>element</var>’s "<code class="highlight">elementtiming</code>" content attribute.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-naturalwidth" id="ref-for-dom-performanceelementtiming-naturalwidth②">naturalWidth</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-naturalheight" id="ref-for-dom-performanceelementtiming-naturalheight②">naturalHeight</a></code> to 0.</p>
       <li data-md>
        <p>Initialize <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-id" id="ref-for-dom-performanceelementtiming-id②">id</a></code> to <var>element</var>’s "<code class="highlight">id</code>" content attribute.</p>
      </ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry" id="ref-for-dfn-queue-a-performanceentry①">Queue the PerformanceEntry</a> <var>entry</var>.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.7" id="sec-element-processing"><span class="secno">3.7. </span><span class="content">Element Timing processing</span><a class="self-link" href="#sec-element-processing"></a></h3>
   <div class="algorithm" data-algorithm="process element timing">
     The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="element-timing-processing">element timing processing</dfn> algorithm receives a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑧">Document</a></code> <var>doc</var> and a timestamp <var>now</var> and performs the following steps: 
    <ol>
     <li data-md>
      <p>For each <var>imagePendingRenderingTriple</var> in <var>doc</var>’s <a data-link-type="dfn" href="#images-pending-rendering" id="ref-for-images-pending-rendering①">images pending rendering</a> list:</p>
      <ol>
       <li data-md>
        <p>Let <var>imageRequest</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage#image-request" id="ref-for-image-request⑧">image request</a> of <var>imagePendingRenderingTriple</var>.</p>
       <li data-md>
        <p>If <var>imageRequest</var> is fully decoded, then run the following steps:</p>
        <ol>
         <li data-md>
          <p>Run the <a data-link-type="dfn" href="#report-image-element-timing" id="ref-for-report-image-element-timing②">report image element timing</a> algorithm passing in <var>imagePendingRenderingTriple</var>, <var>now</var>, and <var>doc</var>.</p>
         <li data-md>
          <p>Remove <var>imagePendingRenderingTriple</var> from <var>doc</var>’s <a data-link-type="dfn" href="#images-pending-rendering" id="ref-for-images-pending-rendering②">images pending rendering</a> list.</p>
        </ol>
      </ol>
     <li data-md>
      <p>For each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②②">Element</a></code> <var>element</var> in <var>doc</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant①">descendants</a>:</p>
      <ol>
       <li data-md>
        <p>If <var>element</var> is contained in <var>doc</var>’s <a data-link-type="dfn" href="#set-of-elements-with-rendered-text" id="ref-for-set-of-elements-with-rendered-text">set of elements with rendered text</a>, continue.</p>
       <li data-md>
        <p>If <var>element</var>’s <a data-link-type="dfn" href="#set-of-owned-text-nodes" id="ref-for-set-of-owned-text-nodes⑤">set of owned text nodes</a> is empty, continue.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#set-append" id="ref-for-set-append②">Append</a> <var>element</var> to <var>doc</var>’s <a data-link-type="dfn" href="#set-of-elements-with-rendered-text" id="ref-for-set-of-elements-with-rendered-text①">set of elements with rendered text</a>.</p>
       <li data-md>
        <p>Run the <a data-link-type="dfn" href="#report-text-element-timing" id="ref-for-report-text-element-timing①">report text element timing</a> given <var>element</var>, <var>now</var>, and <var>doc</var>.</p>
      </ol>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.8" id="sec-get-an-element"><span class="secno">3.8. </span><span class="content">Get an element algorithm</span><a class="self-link" href="#sec-get-an-element"></a></h3>
   <div class="algorithm" data-algorithm="PerformanceElementTiming element">
     When asked to run the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="get-an-element">get an element</dfn> algorithm with <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②③">Element</a></code> <var>element</var> and <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑨">Document</a></code> <var>document</var> as inputs, run these steps: 
    <ol>
     <li data-md>
      <p>If <var>element</var> is not <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected" id="ref-for-connected">connected</a>, return <code class="highlight"><c- kc>null</c-></code>.</p>
     <li data-md>
      <p>Let <var>settings</var> be the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object③">context object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object">relevant settings object</a>.</p>
     <li data-md>
      <p>if <var>document</var> is null, let <var>document</var> be <var>settings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-document" id="ref-for-responsible-document">responsible document</a>.</p>
     <li data-md>
      <p>If <var>element</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root①">root</a> is not equal to <var>document</var> or if <var>document</var> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active" id="ref-for-fully-active①">fully active</a>, return <code class="highlight"><c- kc>null</c-></code>.</p>
     <li data-md>
      <p>Return <var>element</var>.</p>
    </ol>
   </div>
   <h2 class="heading settled" data-level="4" id="sec-security"><span class="secno">4. </span><span class="content">Security &amp; privacy considerations</span><a class="self-link" href="#sec-security"></a></h2>
   <p>This API exposes some information about cross-origin images.
In particular, images that do not pass the <a data-link-type="dfn" href="https://w3c.github.io/resource-timing#dfn-timing-allow-check" id="ref-for-dfn-timing-allow-check①">timing allow check</a> still have their resource load time exposed, which could be a source of privacy concerns.</p>
   <p>However, this is considered to not add new attacks to the web platform because the ResourceTiming API exposes a similar timestamp already.
In addition, the onload handler exposes load timing when it is available, and the resource load time is a close proxy to this.
The <a data-link-type="dfn" href="https://w3c.github.io/hr-time#dfn-current-high-resolution-time" id="ref-for-dfn-current-high-resolution-time①">current high resolution time</a> computed at the beginning of the onload handler would provide the image load time.
We choose to expose the <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-loadtime" id="ref-for-dom-performanceelementtiming-loadtime④">loadTime</a></code> because it is very easy to obtain even without an onload handler.
In addition, we believe any fix to remove the leak provided by image onload handlers or ResourceTiming could also fix the leak provided by this API.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-rendertime" id="ref-for-dom-performanceelementtiming-rendertime④">renderTime</a></code> (display timestamp) can also be polyfilled via the PaintTiming API.
To do this, add an iframe that contains trivial content on the onload handler of the target image or text content.
Then, query the first paint of that iframe to obtain the rendering timestamp of the content.
This is quite inefficient and the polyfill itself might affect the timing obtained.
Due to the difficulty in obtaining this information today, we choose not to expose the display timestamp for images that fail the <a data-link-type="dfn" href="https://w3c.github.io/resource-timing#dfn-timing-allow-check" id="ref-for-dfn-timing-allow-check②">timing allow check</a>.
For clarity, here is a code snippet using the PaintTiming API:</p>
<pre class="example highlight" id="example-5e4b94b5"><a class="self-link" href="#example-5e4b94b5"></a>// In the attacker frame.
<c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>attack.html</c-><c- p>>&lt;/</c-><c- f>iframe</c-><c- p>></c->
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
    window<c- p>.</c->onmessage <c- o>=</c-> e <c- p>=></c-> <c- p>{</c->
        <c- a>let</c-> timestamp <c- o>=</c-> e<c- p>.</c->data<c- p>;</c->
        <c- c1>// Acquired the display timestamp for 'victim.jpg'!</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->

// In the attack.html iframe.
<c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>'victim.jpg'</c-><c- p>/></c->
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
    <c- c1>// Wait until onload or some time when the PaintTiming entries will be visible.</c->
    onload<c- p>()</c-> <c- p>=></c-> <c- p>{</c->
        <c- a>let</c-> entry <c- o>=</c-> performance<c- p>.</c->getEntriesByType<c- p>(</c-><c- t>'paint'</c-><c- p>)[</c-><c- mi>0</c-><c- p>];</c->
        top<c- p>.</c->postMessage<c- p>(</c->entry<c- p>.</c->startTime<c- p>,</c-> <c- t>'*'</c-><c- p>);</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
   <p>The other nontrivial parameter being exposed here is the <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-intersectionrect" id="ref-for-dom-performanceelementtiming-intersectionrect③">intersectionRect</a></code>.
This can already be polyfilled, for example using <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IntersectionObserver#intersectionobserver" id="ref-for-intersectionobserver">IntersectionObserver</a></code>.
The polyfill process would be similar: add an <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IntersectionObserver#intersectionobserver" id="ref-for-intersectionobserver①">IntersectionObserver</a></code> on the onload handler of the target image or text content.
This solution is inefficient because it requires registering the observer once the content has loaded, but it should still provide the same level of accuracy.
For images, we compute the <code class="idl"><a data-link-type="idl" href="#dom-performanceelementtiming-intersectionrect" id="ref-for-dom-performanceelementtiming-intersectionrect④">intersectionRect</a></code> once the image has loaded if it does not pass the <a data-link-type="dfn" href="https://w3c.github.io/resource-timing#dfn-timing-allow-check" id="ref-for-dfn-timing-allow-check③">timing allow check</a>.
Computing it at this point in time allows exposing the entry at that time.
If we were to compute the rect only until the image is fully displayed, we’d only be able to expose the entry after that time.</p>
   <p>If we do not want to expose the rendering timetamp of an image, it’s preferable to dispatch the entry to the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#the-performanceobserver-interface" id="ref-for-the-performanceobserver-interface">PerformanceObserver</a></code> right away.
Suppose we waited and exposed all the entries during the <a data-link-type="dfn" href="#element-timing-processing" id="ref-for-element-timing-processing①">element timing processing</a> algorithm.
An attacker could infer nontrivial information about the rendering timestamp of an image.
It would do so by only observing the timing for that image.
Even though the timestamp is not exposed as a member of the <code class="idl"><a data-link-type="idl" href="#performanceelementtiming" id="ref-for-performanceelementtiming⑦">PerformanceElementTiming</a></code> entry received,
the fact that we wait until the next <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="ref-for-update-the-rendering①">update the rendering</a> step means that the attacker can distinguish between a very slow rendering time and a very fast rendering time by measuring the time at which it received the entry.
This would unintentionally leak some of the display timing of the image.</p>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#associated-background-image-requests">associated background image requests</a><span>, in §3.2</span>
   <li><a href="#associated-image-request">associated image request</a><span>, in §3.1</span>
   <li>
    element
    <ul>
     <li><a href="#dom-performanceelementtiming-element">attribute for PerformanceElementTiming</a><span>, in §2.1</span>
     <li><a href="#element">definition of</a><span>, in §2.1</span>
    </ul>
   <li><a href="#dom-element-elementtiming">elementTiming</a><span>, in §3.1</span>
   <li><a href="#element-timing-processing">element timing processing</a><span>, in §3.7</span>
   <li><a href="#get-an-element">get an element</a><span>, in §3.8</span>
   <li><a href="#dom-performanceelementtiming-id">id</a><span>, in §2.1</span>
   <li><a href="#dom-performanceelementtiming-identifier">identifier</a><span>, in §2.1</span>
   <li><a href="#images-pending-rendering">images pending rendering</a><span>, in §3.1</span>
   <li><a href="#dom-performanceelementtiming-intersectionrect">intersectionRect</a><span>, in §2.1</span>
   <li><a href="#dom-performanceelementtiming-loadtime">loadTime</a><span>, in §2.1</span>
   <li><a href="#dom-performanceelementtiming-naturalheight">naturalHeight</a><span>, in §2.1</span>
   <li><a href="#dom-performanceelementtiming-naturalwidth">naturalWidth</a><span>, in §2.1</span>
   <li><a href="#performanceelementtiming">PerformanceElementTiming</a><span>, in §2.1</span>
   <li><a href="#process-an-image-that-finished-loading">process an image that finished loading</a><span>, in §3.4</span>
   <li><a href="#dom-performanceelementtiming-rendertime">renderTime</a><span>, in §2.1</span>
   <li><a href="#report-image-element-timing">report image element timing</a><span>, in §3.5</span>
   <li><a href="#report-text-element-timing">report text element timing</a><span>, in §3.6</span>
   <li><a href="#request">request</a><span>, in §2.1</span>
   <li><a href="#set-of-elements-with-rendered-text">set of elements with rendered text</a><span>, in §3.1</span>
   <li><a href="#set-of-owned-text-nodes">set of owned text nodes</a><span>, in §3.1</span>
   <li><a href="#dom-performanceelementtiming-tojson">toJSON()</a><span>, in §2.1</span>
   <li><a href="#dom-performanceelementtiming-url">url</a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-painting-order">
   <a href="https://drafts.csswg.org/css2/zindex.html#painting-order">https://drafts.csswg.org/css2/zindex.html#painting-order</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-painting-order">3.2. Modifications to the CSS specification</a> <a href="#ref-for-painting-order①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-image">
   <a href="https://drafts.csswg.org/css-backgrounds-3#propdef-background-image">https://drafts.csswg.org/css-backgrounds-3#propdef-background-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-image">1.1. Elements exposed</a>
    <li><a href="#ref-for-propdef-background-image①">3.2. Modifications to the CSS specification</a> <a href="#ref-for-propdef-background-image②">(2)</a> <a href="#ref-for-propdef-background-image③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#containing-block">https://drafts.csswg.org/css-display-3/#containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block">3.2. Modifications to the CSS specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-font-block-period">
   <a href="https://drafts.csswg.org/css-fonts-4/#font-block-period">https://drafts.csswg.org/css-fonts-4/#font-block-period</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-font-block-period">3.2. Modifications to the CSS specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-document①">3.1. Modifications to the DOM specification</a> <a href="#ref-for-document②">(2)</a>
    <li><a href="#ref-for-document③">3.3. Modifications to the HTML specification</a> <a href="#ref-for-document④">(2)</a>
    <li><a href="#ref-for-document⑤">3.4. Process image that finished loading</a>
    <li><a href="#ref-for-document⑥">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-document⑦">3.6. Report text Element Timing</a>
    <li><a href="#ref-for-document⑧">3.7. Element Timing processing</a>
    <li><a href="#ref-for-document⑨">3.8. Get an element algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">2.1. PerformanceElementTiming interface</a> <a href="#ref-for-element①">(2)</a>
    <li><a href="#ref-for-element③">3.1. Modifications to the DOM specification</a> <a href="#ref-for-element④">(2)</a> <a href="#ref-for-element⑤">(3)</a> <a href="#ref-for-element⑥">(4)</a> <a href="#ref-for-element⑦">(5)</a> <a href="#ref-for-element⑧">(6)</a> <a href="#ref-for-element⑨">(7)</a> <a href="#ref-for-element①⓪">(8)</a>
    <li><a href="#ref-for-element①①">3.2. Modifications to the CSS specification</a> <a href="#ref-for-element①②">(2)</a> <a href="#ref-for-element①③">(3)</a> <a href="#ref-for-element①④">(4)</a> <a href="#ref-for-element①⑤">(5)</a> <a href="#ref-for-element①⑥">(6)</a> <a href="#ref-for-element①⑦">(7)</a>
    <li><a href="#ref-for-element①⑧">3.4. Process image that finished loading</a>
    <li><a href="#ref-for-element②⓪">3.6. Report text Element Timing</a>
    <li><a href="#ref-for-element②②">3.7. Element Timing processing</a>
    <li><a href="#ref-for-element②③">3.8. Get an element algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-text">
   <a href="https://dom.spec.whatwg.org/#text">https://dom.spec.whatwg.org/#text</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-text">3.2. Modifications to the CSS specification</a>
    <li><a href="#ref-for-text①">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-connected">
   <a href="https://dom.spec.whatwg.org/#connected">https://dom.spec.whatwg.org/#connected</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-connected">3.8. Get an element algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-context-object">
   <a href="https://dom.spec.whatwg.org/#context-object">https://dom.spec.whatwg.org/#context-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-context-object">2.1. PerformanceElementTiming interface</a> <a href="#ref-for-context-object①">(2)</a> <a href="#ref-for-context-object②">(3)</a>
    <li><a href="#ref-for-context-object③">3.8. Get an element algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-descendant">
   <a href="https://dom.spec.whatwg.org/#concept-tree-descendant">https://dom.spec.whatwg.org/#concept-tree-descendant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-descendant">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-concept-tree-descendant①">3.7. Element Timing processing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-boundary-point-node">
   <a href="https://dom.spec.whatwg.org/#boundary-point-node">https://dom.spec.whatwg.org/#boundary-point-node</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-boundary-point-node">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-reflect">
   <a href="https://dom.spec.whatwg.org/#concept-reflect">https://dom.spec.whatwg.org/#concept-reflect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-reflect">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-root">
   <a href="https://dom.spec.whatwg.org/#concept-tree-root">https://dom.spec.whatwg.org/#concept-tree-root</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-root">3.4. Process image that finished loading</a>
    <li><a href="#ref-for-concept-tree-root①">3.8. Get an element algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-domrectreadonly">
   <a href="https://drafts.fxtf.org/geometry-1/#domrectreadonly">https://drafts.fxtf.org/geometry-1/#domrectreadonly</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrectreadonly">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-domhighrestimestamp">
   <a href="https://w3c.github.io/hr-time#dom-domhighrestimestamp">https://w3c.github.io/hr-time#dom-domhighrestimestamp</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domhighrestimestamp">2.1. PerformanceElementTiming interface</a> <a href="#ref-for-dom-domhighrestimestamp①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-current-high-resolution-time">
   <a href="https://w3c.github.io/hr-time#dfn-current-high-resolution-time">https://w3c.github.io/hr-time#dfn-current-high-resolution-time</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-current-high-resolution-time">3.4. Process image that finished loading</a>
    <li><a href="#ref-for-dfn-current-high-resolution-time①">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cereactions">
   <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cereactions">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlimageelement">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement">https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlimageelement">3.1. Modifications to the DOM specification</a> <a href="#ref-for-htmlimageelement①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlvideoelement">
   <a href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement">https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlvideoelement">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">3. Processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-img-all">
   <a href="https://html.spec.whatwg.org/multipage/images.html#img-all">https://html.spec.whatwg.org/multipage/images.html#img-all</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-img-all">3.1. Modifications to the DOM specification</a>
    <li><a href="#ref-for-img-all①">3.2. Modifications to the CSS specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-div-element">
   <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-div-element">3.2. Modifications to the CSS specification</a> <a href="#ref-for-the-div-element①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-loop-processing-model">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model">https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-loop-processing-model">3.3. Modifications to the HTML specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fully-active">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active">https://html.spec.whatwg.org/multipage/browsers.html#fully-active</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fully-active">3.3. Modifications to the HTML specification</a>
    <li><a href="#ref-for-fully-active①">3.8. Get an element algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-image-request">
   <a href="https://html.spec.whatwg.org/multipage#image-request">https://html.spec.whatwg.org/multipage#image-request</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-image-request">3.1. Modifications to the DOM specification</a> <a href="#ref-for-image-request①">(2)</a> <a href="#ref-for-image-request②">(3)</a>
    <li><a href="#ref-for-image-request③">3.2. Modifications to the CSS specification</a> <a href="#ref-for-image-request④">(2)</a> <a href="#ref-for-image-request⑤">(3)</a> <a href="#ref-for-image-request⑥">(4)</a> <a href="#ref-for-image-request⑦">(5)</a>
    <li><a href="#ref-for-image-request⑧">3.7. Element Timing processing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-img-element">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-img-element">1.1. Elements exposed</a>
    <li><a href="#ref-for-the-img-element①">3.5. Report image Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-of-available-images">
   <a href="https://html.spec.whatwg.org/multipageimages.html#list-of-available-images">https://html.spec.whatwg.org/multipageimages.html#list-of-available-images</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-of-available-images">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-img-naturalheight">
   <a href="https://html.spec.whatwg.org/multipage#dom-img-naturalheight">https://html.spec.whatwg.org/multipage#dom-img-naturalheight</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-img-naturalheight">3.5. Report image Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-img-naturalwidth">
   <a href="https://html.spec.whatwg.org/multipage#dom-img-naturalwidth">https://html.spec.whatwg.org/multipage#dom-img-naturalwidth</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-img-naturalwidth">3.5. Report image Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-relevant-settings-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object">https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-relevant-settings-object">3.8. Get an element algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-resolve-a-url">
   <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#resolve-a-url">https://html.spec.whatwg.org/multipage/urls-and-fetching.html#resolve-a-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resolve-a-url">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-responsible-document">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-document">https://html.spec.whatwg.org/multipage/webappapis.html#responsible-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-responsible-document">3.8. Get an element algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-update-the-rendering">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering">https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-the-rendering">3.3. Modifications to the HTML specification</a>
    <li><a href="#ref-for-update-the-rendering①">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-video">
   <a href="https://html.spec.whatwg.org/multipage/media.html#video">https://html.spec.whatwg.org/multipage/media.html#video</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-video">1.1. Elements exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-set-append">
   <a href="https://infra.spec.whatwg.org/#set-append">https://infra.spec.whatwg.org/#set-append</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-append">3.2. Modifications to the CSS specification</a> <a href="#ref-for-set-append①">(2)</a>
    <li><a href="#ref-for-set-append②">3.7. Element Timing processing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ordered-set">
   <a href="https://infra.spec.whatwg.org/#ordered-set">https://infra.spec.whatwg.org/#ordered-set</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ordered-set">3.1. Modifications to the DOM specification</a> <a href="#ref-for-ordered-set①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-intersectionobserver">
   <a href="https://w3c.github.io/IntersectionObserver#intersectionobserver">https://w3c.github.io/IntersectionObserver#intersectionobserver</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersectionobserver">4. Security &amp; privacy considerations</a> <a href="#ref-for-intersectionobserver①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-calculate-intersection-rect-algo">
   <a href="https://w3c.github.io/IntersectionObserver#calculate-intersection-rect-algo">https://w3c.github.io/IntersectionObserver#calculate-intersection-rect-algo</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-calculate-intersection-rect-algo">3.5. Report image Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-potentially-add-a-largestcontentfulpaint-entry">
   <a href="https://wicg.github.io/largest-contentful-paint/#potentially-add-a-largestcontentfulpaint-entry">https://wicg.github.io/largest-contentful-paint/#potentially-add-a-largestcontentfulpaint-entry</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-potentially-add-a-largestcontentfulpaint-entry">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-potentially-add-a-largestcontentfulpaint-entry①">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-performanceentry-interface">
   <a href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface">https://w3c.github.io/performance-timeline/#the-performanceentry-interface</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-performanceentry-interface">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-performanceobserver-interface">
   <a href="https://w3c.github.io/performance-timeline/#the-performanceobserver-interface">https://w3c.github.io/performance-timeline/#the-performanceobserver-interface</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-performanceobserver-interface">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-duration">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration">https://w3c.github.io/performance-timeline/#dom-performanceentry-duration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-duration">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-entrytype">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype">https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-entrytype">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-name">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name">https://w3c.github.io/performance-timeline/#dom-performanceentry-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-name">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-dom-performanceentry-name①">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-dom-performanceentry-name②">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-queue-a-performanceentry">
   <a href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry">https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-queue-a-performanceentry">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-dfn-queue-a-performanceentry①">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-starttime">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime">https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-starttime">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-supportedentrytypes-attribute">
   <a href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute">https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-supportedentrytypes-attribute">3. Processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-timing-allow-check">
   <a href="https://w3c.github.io/resource-timing#dfn-timing-allow-check">https://w3c.github.io/resource-timing#dfn-timing-allow-check</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-timing-allow-check">3.4. Process image that finished loading</a>
    <li><a href="#ref-for-dfn-timing-allow-check①">4. Security &amp; privacy considerations</a> <a href="#ref-for-dfn-timing-allow-check②">(2)</a> <a href="#ref-for-dfn-timing-allow-check③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-InterfaceSVGImageElement">
   <a href="https://svgwg.org/svg2-draft/embedded.html#InterfaceSVGImageElement">https://svgwg.org/svg2-draft/embedded.html#InterfaceSVGImageElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-InterfaceSVGImageElement">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-image">
   <a href="https://svgwg.org/svg2-draft/embedded.html#elementdef-image">https://svgwg.org/svg2-draft/embedded.html#elementdef-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-image">1.1. Elements exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-svg">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-svg">https://svgwg.org/svg2-draft/struct.html#elementdef-svg</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-svg">1.1. Elements exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-url-scheme">
   <a href="https://url.spec.whatwg.org/#concept-url-scheme">https://url.spec.whatwg.org/#concept-url-scheme</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-url-scheme">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-concept-url-scheme①">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2.1. PerformanceElementTiming interface</a> <a href="#ref-for-idl-DOMString①">(2)</a> <a href="#ref-for-idl-DOMString②">(3)</a> <a href="#ref-for-idl-DOMString③">(4)</a>
    <li><a href="#ref-for-idl-DOMString④">3.1. Modifications to the DOM specification</a>
    <li><a href="#ref-for-idl-DOMString⑤">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-idl-DOMString⑥">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Default">
   <a href="https://heycam.github.io/webidl/#Default">https://heycam.github.io/webidl/#Default</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Default">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long">https://heycam.github.io/webidl/#idl-unsigned-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long">2.1. PerformanceElementTiming interface</a> <a href="#ref-for-idl-unsigned-long①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-painting-order" style="color:initial">painting order</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-background-image" style="color:initial">background-image</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-containing-block" style="color:initial">containing block</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-font-block-period" style="color:initial">font block period</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-text" style="color:initial">Text</span>
     <li><span class="dfn-paneled" id="term-for-connected" style="color:initial">connected</span>
     <li><span class="dfn-paneled" id="term-for-context-object" style="color:initial">context object</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-descendant" style="color:initial">descendant</span>
     <li><span class="dfn-paneled" id="term-for-boundary-point-node" style="color:initial">node</span>
     <li><span class="dfn-paneled" id="term-for-concept-reflect" style="color:initial">reflect</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-root" style="color:initial">root</span>
    </ul>
   <li>
    <a data-link-type="biblio">[geometry-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-domrectreadonly" style="color:initial">DOMRectReadOnly</span>
    </ul>
   <li>
    <a data-link-type="biblio">[hr-time]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-domhighrestimestamp" style="color:initial">DOMHighResTimeStamp</span>
     <li><span class="dfn-paneled" id="term-for-dfn-current-high-resolution-time" style="color:initial">current high resolution time</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cereactions" style="color:initial">CEReactions</span>
     <li><span class="dfn-paneled" id="term-for-htmlimageelement" style="color:initial">HTMLImageElement</span>
     <li><span class="dfn-paneled" id="term-for-htmlvideoelement" style="color:initial">HTMLVideoElement</span>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-img-all" style="color:initial">completely available</span>
     <li><span class="dfn-paneled" id="term-for-the-div-element" style="color:initial">div</span>
     <li><span class="dfn-paneled" id="term-for-event-loop-processing-model" style="color:initial">event loop processing model</span>
     <li><span class="dfn-paneled" id="term-for-fully-active" style="color:initial">fully active</span>
     <li><span class="dfn-paneled" id="term-for-image-request" style="color:initial">image request</span>
     <li><span class="dfn-paneled" id="term-for-the-img-element" style="color:initial">img</span>
     <li><span class="dfn-paneled" id="term-for-list-of-available-images" style="color:initial">list of available images</span>
     <li><span class="dfn-paneled" id="term-for-dom-img-naturalheight" style="color:initial">naturalHeight</span>
     <li><span class="dfn-paneled" id="term-for-dom-img-naturalwidth" style="color:initial">naturalWidth</span>
     <li><span class="dfn-paneled" id="term-for-relevant-settings-object" style="color:initial">relevant settings object</span>
     <li><span class="dfn-paneled" id="term-for-resolve-a-url" style="color:initial">resolved url</span>
     <li><span class="dfn-paneled" id="term-for-responsible-document" style="color:initial">responsible document</span>
     <li><span class="dfn-paneled" id="term-for-update-the-rendering" style="color:initial">update the rendering</span>
     <li><span class="dfn-paneled" id="term-for-video" style="color:initial">video</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-set-append" style="color:initial">append</span>
     <li><span class="dfn-paneled" id="term-for-ordered-set" style="color:initial">ordered set</span>
    </ul>
   <li>
    <a data-link-type="biblio">[intersection-observer]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-intersectionobserver" style="color:initial">IntersectionObserver</span>
     <li><span class="dfn-paneled" id="term-for-calculate-intersection-rect-algo" style="color:initial">intersection rect algorithm</span>
    </ul>
   <li>
    <a data-link-type="biblio">[largest-contentful-paint]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-potentially-add-a-largestcontentfulpaint-entry" style="color:initial">potentially add a largestcontentfulpaint entry</span>
    </ul>
   <li>
    <a data-link-type="biblio">[performance-timeline-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-performanceentry-interface" style="color:initial">PerformanceEntry</span>
     <li><span class="dfn-paneled" id="term-for-the-performanceobserver-interface" style="color:initial">PerformanceObserver</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-duration" style="color:initial">duration</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-entrytype" style="color:initial">entryType</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-name" style="color:initial">name</span>
     <li><span class="dfn-paneled" id="term-for-dfn-queue-a-performanceentry" style="color:initial">queue the performanceentry</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-starttime" style="color:initial">startTime</span>
     <li><span class="dfn-paneled" id="term-for-supportedentrytypes-attribute" style="color:initial">supportedEntryTypes</span>
    </ul>
   <li>
    <a data-link-type="biblio">[resource-timing-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dfn-timing-allow-check" style="color:initial">timing allow check</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-InterfaceSVGImageElement" style="color:initial">SVGImageElement</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-image" style="color:initial">image</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-svg" style="color:initial">svg</span>
    </ul>
   <li>
    <a data-link-type="biblio">[URL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-url-scheme" style="color:initial">scheme</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Default" style="color:initial">Default</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long" style="color:initial">unsigned long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-fonts-4">[CSS-FONTS-4]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/">CSS Fonts Module Level 4</a>. 20 September 2018. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-geometry-1">[GEOMETRY-1]
   <dd>Simon Pieters; Chris Harrelson. <a href="https://www.w3.org/TR/geometry-1/">Geometry Interfaces Module Level 1</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/geometry-1/">https://www.w3.org/TR/geometry-1/</a>
   <dt id="biblio-hr-time">[HR-TIME]
   <dd>Jatinder Mann. <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a>. 17 December 2012. REC. URL: <a href="https://www.w3.org/TR/hr-time/">https://www.w3.org/TR/hr-time/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-intersection-observer">[INTERSECTION-OBSERVER]
   <dd>Stefan Zager; Michael Blain. <a href="https://www.w3.org/TR/intersection-observer/">Intersection Observer</a>. 31 May 2019. WD. URL: <a href="https://www.w3.org/TR/intersection-observer/">https://www.w3.org/TR/intersection-observer/</a>
   <dt id="biblio-performance-timeline-2">[PERFORMANCE-TIMELINE-2]
   <dd>Ilya Grigorik. <a href="https://www.w3.org/TR/performance-timeline-2/">Performance Timeline Level 2</a>. 23 April 2019. WD. URL: <a href="https://www.w3.org/TR/performance-timeline-2/">https://www.w3.org/TR/performance-timeline-2/</a>
   <dt id="biblio-resource-timing-1">[RESOURCE-TIMING-1]
   <dd>Arvind Jain; et al. <a href="https://www.w3.org/TR/resource-timing-1/">Resource Timing Level 1</a>. 30 March 2017. CR. URL: <a href="https://www.w3.org/TR/resource-timing-1/">https://www.w3.org/TR/resource-timing-1/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
   <dt id="biblio-url">[URL]
   <dd>Anne van Kesteren. <a href="https://url.spec.whatwg.org/">URL Standard</a>. Living Standard. URL: <a href="https://url.spec.whatwg.org/">https://url.spec.whatwg.org/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-rfc2397">[RFC2397]
   <dd>L. Masinter. <a href="https://tools.ietf.org/html/rfc2397">The "data" URL scheme</a>. August 1998. Proposed Standard. URL: <a href="https://tools.ietf.org/html/rfc2397">https://tools.ietf.org/html/rfc2397</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#performanceelementtiming"><code class="highlight"><c- g>PerformanceElementTiming</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface①"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp②"><c- n>DOMHighResTimeStamp</c-></a> <a data-readonly data-type="DOMHighResTimeStamp" href="#dom-performanceelementtiming-rendertime"><code class="highlight"><c- g>renderTime</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp①①"><c- n>DOMHighResTimeStamp</c-></a> <a data-readonly data-type="DOMHighResTimeStamp" href="#dom-performanceelementtiming-loadtime"><code class="highlight"><c- g>loadTime</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly①"><c- n>DOMRectReadOnly</c-></a> <a data-readonly data-type="DOMRectReadOnly" href="#dom-performanceelementtiming-intersectionrect"><code class="highlight"><c- g>intersectionRect</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-performanceelementtiming-identifier"><code class="highlight"><c- g>identifier</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-performanceelementtiming-naturalwidth"><code class="highlight"><c- g>naturalWidth</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-performanceelementtiming-naturalheight"><code class="highlight"><c- g>naturalHeight</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-performanceelementtiming-id"><code class="highlight"><c- g>id</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②④"><c- n>Element</c-></a>? <a data-readonly data-type="Element?" href="#dom-performanceelementtiming-element"><code class="highlight"><c- g>element</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-performanceelementtiming-url"><code class="highlight"><c- g>url</c-></code></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <a href="#dom-performanceelementtiming-tojson"><code class="highlight"><c- g>toJSON</c-></code></a>();
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#element" id="ref-for-element④①"><c- g>Element</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions①"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④①"><c- b>DOMString</c-></a> <a data-type="DOMString" href="#dom-element-elementtiming"><code class="highlight"><c- g>elementTiming</c-></code></a>;
};

</pre>
  <aside class="dfn-panel" data-for="performanceelementtiming">
   <b><a href="#performanceelementtiming">#performanceelementtiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-performanceelementtiming">2.1. PerformanceElementTiming interface</a> <a href="#ref-for-performanceelementtiming①">(2)</a> <a href="#ref-for-performanceelementtiming②">(3)</a> <a href="#ref-for-performanceelementtiming③">(4)</a>
    <li><a href="#ref-for-performanceelementtiming④">3.2. Modifications to the CSS specification</a>
    <li><a href="#ref-for-performanceelementtiming⑤">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-performanceelementtiming⑥">3.6. Report text Element Timing</a>
    <li><a href="#ref-for-performanceelementtiming⑦">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceelementtiming-rendertime">
   <b><a href="#dom-performanceelementtiming-rendertime">#dom-performanceelementtiming-rendertime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceelementtiming-rendertime">2.1. PerformanceElementTiming interface</a> <a href="#ref-for-dom-performanceelementtiming-rendertime①">(2)</a>
    <li><a href="#ref-for-dom-performanceelementtiming-rendertime②">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-rendertime③">3.6. Report text Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-rendertime④">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceelementtiming-loadtime">
   <b><a href="#dom-performanceelementtiming-loadtime">#dom-performanceelementtiming-loadtime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceelementtiming-loadtime">2.1. PerformanceElementTiming interface</a> <a href="#ref-for-dom-performanceelementtiming-loadtime①">(2)</a>
    <li><a href="#ref-for-dom-performanceelementtiming-loadtime②">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-loadtime③">3.6. Report text Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-loadtime④">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceelementtiming-intersectionrect">
   <b><a href="#dom-performanceelementtiming-intersectionrect">#dom-performanceelementtiming-intersectionrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceelementtiming-intersectionrect">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-dom-performanceelementtiming-intersectionrect①">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-intersectionrect②">3.6. Report text Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-intersectionrect③">4. Security &amp; privacy considerations</a> <a href="#ref-for-dom-performanceelementtiming-intersectionrect④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceelementtiming-identifier">
   <b><a href="#dom-performanceelementtiming-identifier">#dom-performanceelementtiming-identifier</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceelementtiming-identifier">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-dom-performanceelementtiming-identifier①">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-identifier②">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceelementtiming-naturalwidth">
   <b><a href="#dom-performanceelementtiming-naturalwidth">#dom-performanceelementtiming-naturalwidth</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceelementtiming-naturalwidth">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-dom-performanceelementtiming-naturalwidth①">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-naturalwidth②">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceelementtiming-naturalheight">
   <b><a href="#dom-performanceelementtiming-naturalheight">#dom-performanceelementtiming-naturalheight</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceelementtiming-naturalheight">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-dom-performanceelementtiming-naturalheight①">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-naturalheight②">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceelementtiming-id">
   <b><a href="#dom-performanceelementtiming-id">#dom-performanceelementtiming-id</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceelementtiming-id">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-dom-performanceelementtiming-id①">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-dom-performanceelementtiming-id②">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceelementtiming-element">
   <b><a href="#dom-performanceelementtiming-element">#dom-performanceelementtiming-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceelementtiming-element">2.1. PerformanceElementTiming interface</a> <a href="#ref-for-dom-performanceelementtiming-element①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceelementtiming-url">
   <b><a href="#dom-performanceelementtiming-url">#dom-performanceelementtiming-url</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceelementtiming-url">2.1. PerformanceElementTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="request">
   <b><a href="#request">#request</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-request">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-request①">3.5. Report image Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element">
   <b><a href="#element">#element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element②">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-element①⑨">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-element②①">3.6. Report text Element Timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-element-elementtiming">
   <b><a href="#dom-element-elementtiming">#dom-element-elementtiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-element-elementtiming">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="associated-image-request">
   <b><a href="#associated-image-request">#associated-image-request</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-associated-image-request">3.1. Modifications to the DOM specification</a> <a href="#ref-for-associated-image-request①">(2)</a> <a href="#ref-for-associated-image-request②">(3)</a> <a href="#ref-for-associated-image-request③">(4)</a>
    <li><a href="#ref-for-associated-image-request④">3.4. Process image that finished loading</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="set-of-owned-text-nodes">
   <b><a href="#set-of-owned-text-nodes">#set-of-owned-text-nodes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-of-owned-text-nodes">3.2. Modifications to the CSS specification</a> <a href="#ref-for-set-of-owned-text-nodes①">(2)</a> <a href="#ref-for-set-of-owned-text-nodes②">(3)</a> <a href="#ref-for-set-of-owned-text-nodes③">(4)</a>
    <li><a href="#ref-for-set-of-owned-text-nodes④">3.6. Report text Element Timing</a>
    <li><a href="#ref-for-set-of-owned-text-nodes⑤">3.7. Element Timing processing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="images-pending-rendering">
   <b><a href="#images-pending-rendering">#images-pending-rendering</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-images-pending-rendering">3.4. Process image that finished loading</a>
    <li><a href="#ref-for-images-pending-rendering①">3.7. Element Timing processing</a> <a href="#ref-for-images-pending-rendering②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="set-of-elements-with-rendered-text">
   <b><a href="#set-of-elements-with-rendered-text">#set-of-elements-with-rendered-text</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-of-elements-with-rendered-text">3.7. Element Timing processing</a> <a href="#ref-for-set-of-elements-with-rendered-text①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="associated-background-image-requests">
   <b><a href="#associated-background-image-requests">#associated-background-image-requests</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-associated-background-image-requests">3.2. Modifications to the CSS specification</a> <a href="#ref-for-associated-background-image-requests①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="process-an-image-that-finished-loading">
   <b><a href="#process-an-image-that-finished-loading">#process-an-image-that-finished-loading</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-process-an-image-that-finished-loading">3.1. Modifications to the DOM specification</a>
    <li><a href="#ref-for-process-an-image-that-finished-loading①">3.2. Modifications to the CSS specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="report-image-element-timing">
   <b><a href="#report-image-element-timing">#report-image-element-timing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-report-image-element-timing">1.1. Elements exposed</a>
    <li><a href="#ref-for-report-image-element-timing①">3.4. Process image that finished loading</a>
    <li><a href="#ref-for-report-image-element-timing②">3.7. Element Timing processing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="report-text-element-timing">
   <b><a href="#report-text-element-timing">#report-text-element-timing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-report-text-element-timing">1.1. Elements exposed</a>
    <li><a href="#ref-for-report-text-element-timing①">3.7. Element Timing processing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-timing-processing">
   <b><a href="#element-timing-processing">#element-timing-processing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-timing-processing">3.3. Modifications to the HTML specification</a>
    <li><a href="#ref-for-element-timing-processing①">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="get-an-element">
   <b><a href="#get-an-element">#get-an-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-get-an-element">2.1. PerformanceElementTiming interface</a>
    <li><a href="#ref-for-get-an-element①">3.5. Report image Element Timing</a>
    <li><a href="#ref-for-get-an-element②">3.6. Report text Element Timing</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>